<template>
    <div>
        <ul class="Browse">
            <li v-for="item in piclist" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.path" alt="">
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

//约定对象bookList的键可以是任何类型的string，任意值
interface bookListTypeI {
    [p: string]: any
}
export default defineComponent({
    data() {
        return {
            piclist: [
                { id: 1, path: 'https://www.kfzimg.com/sw/kfz-cos/kfzimg/fadedcdb/eb79b41b852f0b68_n.jpg' },
                { id: 2, path: 'https://www.kfzimg.com/sw/kfz-cos/pmimg/bbcabfcf/22cf1e66c0473073_n.jpg' },
                { id: 3, path: 'https://www.kfzimg.com/sw/kfz-cos/kfzimg/cdbbedef/68bea13fd7eb448c_s.jpg' },
                { id: 4, path: 'https://www.kfzimg.com/sw/pmimg/3519/0309344432497a470b_s.jpg' },
                { id: 5, path: 'https://www.kfzimg.com/sw/pmimg/3519/030934454a1180c655_s.jpg' },
                { id: 6, path: 'https://www.kfzimg.com/sw/kfz-cos/pmimg/10395580/1e658c4d3bed9ba7_n.jpg' },
                { id: 7, path: 'https://www.kfzimg.com/sw/kfz-cos/pmimg/10395580/29388c7e74bfdc89_n.jpg' },
                { id: 8, path: 'https://www.kfzimg.com/sw/kfz-cos/pmimg/10395580/2ad2fa34f216bc1f_n.jpg' },
                { id: 9, path: 'https://www.kfzimg.com/sw/kfz-cos/pmimg/10395580/02942f2d2200f2af_s.jpg' }
            ],
            historyData: [] as Array<object>,
        }
    },
    //实现页面跳转的方法
    methods: {
        gotoDetail(books: any) {
            this.$router.push('/detail/' + books.id);
            // this.historyData.push(books)
            // console.log(this.historyData)
            // // console.log(this)
            let hArr = [];
            let storage = localStorage.getItem("historyData");
            if (storage) {
                hArr = JSON.parse(storage);
            }
            let ind = hArr.findIndex((b: { id: number }) => b.id === books.id);
            ind == -1 && hArr.push(books);
            localStorage.setItem('historyData', JSON.stringify(hArr));
            // this.historyData+=storage
            console.log(this.historyData)
        },

        // saveToStorge(key: string, val: string) {
        //     let bookslist = {} as bookListTypeI;
        //     bookslist[key] = val;
        //     // if()
        //     // console.log(bookslist)
        //     localStorage.setItem('__bookslist__', JSON.stringify(bookslist));
        // }
    },
    mounted() {
        //如果本地存储的数据historyList有值，直接赋值给data中的historyList
        // let storage=JSON.parse((localStorage.getItem("historyList")) as any)
        // if (storage) {
        //     this.historyList = JSON.parse(localStorage.getItem("historyList") as any);
        //     // this.saveToStorge('age', '18')
        // }
    },

    //监听函数
    watch: {
        '$route'(books) {
            this.gotoDetail(books);//我的初始化方法
        }
    },
}) 
</script>

<style lang="scss" scoped>
li {
    list-style: none;
}

.Browse {
    margin: 93px auto;
    width: 1120px;
    text-align: justify;

    li {
        float: left;
        line-height: 208px;
        text-align: center;
        width: 208px;
        height: 208px;
        margin-left: 15px;
        margin-bottom: 10px;
    }

    // position: relative;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>